<template>
  <div class="home">
    <div class="imgs">
      <img src="../assets/1.gif" alt />
    </div>

    <van-form>
      <van-field
        v-model="state.tel"
        type="tel"
        label="手机号"
        :rules="[{validator, message: '手机号格式不对' }]"
      />
      <van-field v-model="state.sms" center clearable label="短信验证码"  placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="primary" @click="getcode" :disabled="state.btnDisable">{{state.btnText}}</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" class="login" @click="onSubmit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import api from "../utility/request";
export default defineComponent({
  components: {},

  setup(props,context) {
    const state = reactive({
      img: "",
      tel: "",
      sms: "",
      count: null,
      btnText: "发送验证码",
      code: "",
      btnDisable: false
    });
    const validator = val => {
      return /^1[3-9]\d{9}$/.test(val);
    };


    const router=useRouter()
    const onSubmit = () => {
      console.log(state.tel);
      if (state.sms) {
        调用接口
        api
          .post("/login", {
            user: state.tel
          })
          .then(res => {
            console.log(res.data);
            window.localStorage.setItem("token",res.data.token)
            if(res.data.token){
              router.push({path:"/Home",query:res.data.isHave})
            }
          });
      } else {
        Toast(`请输入验证码`);
      }
    };

    //生成验证码
    const SendCode = () => {
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
      for (var i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * 9);
        state.code += random[index];
      }
      state.count = Math.floor(Math.random() * 5 + 1);
      setTimeout(() => {
        Toast(`验证码为：${state.code}`);
        console.log(`验证码为：${state.code}`);
      }, state.count * 1000);
      console.log(state.count);
    };

    //点击获取验证码
    const getcode = () => {
      if (state.tel) {
        SendCode();
        state.btnDisable = true;
        let timeout = 30; //重置时间
        let timer = null;
        //倒计时
        timer = setInterval(() => {
          timeout--;
          state.btnText = `${timeout}s后重试`;
          if (timeout <= 0) {
            clearInterval(timer);
            state.btnDisable = false;
            state.btnText = "发送验证码";
            state.code=""
          }
        }, 1000);
      } else {
        Toast(`请输入手机号`);
      }
    };

    return {
      state,
      onSubmit,
      validator,
      getcode
    };
  }
});
</script>

<style lang="scss" scoped>
.imgs {
  img {
    margin-left: 50%;
    transform: translate(-50%, 0);
  }
}

.login {
  background: #1989fa;
  border: none;
}
</style>    
